<template>
  <fieldset>
    <legend>动画</legend>
    <button @click="flag = !flag">点击</button>
    <transition
      enter-active-class="animate__animated animate__backInDown"
      leave-active-class="animate__animated animate__backOutDown"
    >
      <div id="dv" v-if="flag"></div>
    </transition>
  </fieldset>
</template>

<script>
import "animate.css";

export default {
  data() {
    return {
      flag: true,
    };
  },
};
</script>
<style>
#dv {
  width: 100px;
  height: 100px;
  background-color: hotpink;
}
/* .v-enter {
  transform: translateX(0);
}
.v-enter-to {
  transform: translateX(500px);
}
.v-enter-active {
  transition: all 1s;
} */
</style>
